import { lazy } from 'react'
import App from 'App'
import EmptyRoute from 'components/EmptyRoute'

export type routeObj = {
    fullpath?: string,
    path: string,
    component: any,
    icon?: any,
    meta: { title: string, [key: string]: any },
    children?: routeObj[]
}
const routes: Array<routeObj> = [
    {
        path: '/jsPage',
        component: App,
        meta: { title: 'JSPage' },
        children: [
            {
                path: '/second',
                meta: { title: '数组' },
                component: lazy(() => import('pages/jsPage/01Array')),
            },
            {
                path: '/string',
                meta: { title: '字符串' },
                component: lazy(() => import('pages/jsPage/05String')),
            },
            {
                path: '/modulePage',
                // icon: require('@ant-design/icons/UserOutlined'),
                meta: { title: 'modulePage' },
                component: lazy(() => import('pages/jsPage/01HelloWorld')),
            },
            {
                path: '/desing-patterns',
                meta: { title: '设计模式' },
                component: lazy(() => import('pages/jsPage/03DesignPatterns')),
            },
            {
                path: '/iterator',
                meta: { title: '迭代器' },
                component: lazy(() => import('pages/jsPage/04Iteratror')),
            },
        ],
    },
    {
        path: '/reactPage',
        component: App,
        meta: { title: 'React' },
        children: [
            {
                path: '/firstPage',
                component: lazy(() => import('pages/reactPage/01FirstPage')),
                meta: { title: 'FirstPage' }
            },
            {
                path: '/secondPage',
                component: lazy(() => import('pages/reactPage/02SecondPage')),
                meta: { title: 'SecondPage' }
            },
            {
                path: '/hooks',
                component: EmptyRoute,
                meta: { title: 'Hooks' },
                children: [
                    {
                        path: '/useRef',
                        component: lazy(() => import('pages/reactPage/03UseRef')),
                        meta: { title: 'useRef' }
                    }
                ]
            },
            {
                path: '/formPage',
                component: lazy(() => import('pages/reactPage/04FormPage')),
                meta: { title: '表单' }
            },

        ]
    },
    {
        path: '/cssPage',
        component: App,
        meta: { title: 'cssPage' },
        children: [
            {
                path: '/first',
                component: lazy(() => import('pages/cssPage/01Flex')),
                meta: { title: 'flex布局' }
            }
        ]
    }
]
// 处理路由表
const handleRouters = (routes: Array<routeObj>, parentPath: string = '') => {
    routes.forEach(item => {
        item.fullpath = `${parentPath}${item.path}`
        if (item.children) handleRouters(item.children, item.fullpath)
    })
}
handleRouters(routes)
export default routes
